<!documentTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>自定义查询</title>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.min.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/mui.dtpicker.js"></script>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/mui.picker.min.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<link href="../css/mui.dtpicker.css" rel="stylesheet" />
		<style>
			.title {
				padding: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				background-color: #fff;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">历史记录查询</h1>
		</header>
		<div class="mui-content">
			<div class="title" id="queryTitle">
				个人设置中心
			</div>
			<form class="mui-input-group">
				<p>起始时间</p>
				<div class="time">
					<input name="pickTimeStart" type="hidden" id="pickTimeStart" value="">
					<button id='pickTimeStartBtn' class="btn mui-btn mui-btn-block">请选择起始时间...</button>
				</div>
				<p>截止时间</p>
				<div class="time">
					<input name="pickTimeEnd" type="hidden" id="pickTimeEnd" value="">
					<button id='pickTimeEndBtn' class="btn mui-btn mui-btn-block">请选择截止时间...</button>
				</div>
				<div class="mui-button-row">
					<button type="button" id="queryBtn" class="mui-btn mui-btn-primary" onclick="queryUserStatus();">查询</button>
				</div>
			</form>
			<div style="height:44px;"></div>
		</div>
		
		<script>
			mui.init();
			
			var pickTimeStart = 1990-01-01;
			var pickTimeEnd = 1990-01-01;
			var queryUserName = localStorage.getItem('queryUserName');
			
			document.getElementById('queryTitle').innerHTML = '查询用户（' + queryUserName + ')的历史记录';
			
			(function($, doc) {
				var _getParam = function(obj, param) {
					return obj[param] || '';
				};

				// 出生年月
				pickTimeStart = doc.getElementById('pickTimeStart').value;
				var pickTimeStartBtn = doc.getElementById('pickTimeStartBtn');
				pickTimeStartBtn.addEventListener('tap', function() {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					var id = this.getAttribute('id');
					var picker = new $.DtPicker({
						type: "datetime", //设置日历初始化
						beginYear: 1898, //设置开始日期
						endDate: new Date //设置结束日期
					});
					picker.show(function(rs) {
						/*
						 * rs.value 拼合后的 value
						 * rs.text 拼合后的 text
						 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
						 * rs.m 月，用法同年
						 * rs.d 日，用法同年
						 * rs.h 时，用法同年
						 * rs.i 分（minutes 的第二个字母），用法同年
						 */
						pickTimeStartBtn.innerText = rs.text;
						pickTimeStart = rs.text;
						/*
						 * 返回 false 可以阻止选择框的关闭
						 * return false;
						 */
						/*
						 * 释放组件资源，释放后将将不能再操作组件
						 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
						 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
						 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
						 */
						picker.dispose();
					});
				}, false);
				
				pickTimeEnd = doc.getElementById('pickTimeEnd').value;
				var pickTimeEndBtn = doc.getElementById('pickTimeEndBtn');
				pickTimeEndBtn.addEventListener('tap', function() {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					var id = this.getAttribute('id');
					var picker = new $.DtPicker({
						type: "datetime", //设置日历初始化
						beginYear: 1898, //设置开始日期
						endDate: new Date //设置结束日期
					});
					picker.show(function(rs) {
						/*
						 * rs.value 拼合后的 value
						 * rs.text 拼合后的 text
						 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
						 * rs.m 月，用法同年
						 * rs.d 日，用法同年
						 * rs.h 时，用法同年
						 * rs.i 分（minutes 的第二个字母），用法同年
						 */
						pickTimeEndBtn.innerText = rs.text;
						pickTimeEnd = rs.text;
						/*
						 * 返回 false 可以阻止选择框的关闭
						 * return false;
						 */
						/*
						 * 释放组件资源，释放后将将不能再操作组件
						 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
						 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
						 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
						 */
						picker.dispose();
					});
				}, false);
				
			})(mui, document);
			
			function queryUserStatus(){
				var url = localStorage.getItem('remoteAddress') + '/api/customQuery';
				//alert(queryUserName+pickTimeStart+pickTimeEnd);
				mui.get(url,{
					userName: queryUserName,
					startTime: pickTimeStart,
					endTime: pickTimeEnd
					},function(data){
						var data = data.data;
						//alert(data.timeStep[0]);
						localStorage.setItem('queryUserTimestep',JSON.stringify(data.timeStep));
						localStorage.setItem('queryUserXueya',JSON.stringify(data.xueya));
						localStorage.setItem('queryUserXinlv',JSON.stringify(data.xinlv));
						localStorage.setItem('queryUserMaibo',JSON.stringify(data.maibo));
						localStorage.setItem('queryUserTiwen',JSON.stringify(data.tiwen));
						//var tmp = new Array();
						//tmp = JSON.parse(localStorage.getItem('queryUserTimestep'));
						//alert(tmp[0]);
					},'json'
				);
				plus.webview.close("customQueryPage");
				var customQueryResultPage = plus.webview.open('customQueryResultPage.html', 'customQueryResultPage', {}, 'slide-in-right', 200);
			}
			
		</script>
	</body>
</html>
